<template>
  <div>
    <!--index的 二级路由出口 -->
    <!-- <keep-alive> -->
    <router-view class="vw"></router-view>
    <!-- </keep-alive> -->
    <!-- <router-view v-if="!$route.meta.keep"></router-view> -->
    <footer>
      <router-link active-class="active" to="/index/store">
        <van-icon name="home-o" />
        <p>首页</p>
      </router-link>
      <router-link active-class="active" to="/index/sort">
        <van-icon name="apps-o" />
        <p>分类</p>
      </router-link>
      <router-link active-class="active" to="/index/shopping">
        <van-icon name="shopping-cart-o" />
        <p>购物车</p>
      </router-link>
      <router-link active-class="active" to="/index/main"><van-icon name="user-o" />
      <p>我的</p>
      </router-link>
    </footer>
  </div>
</template>

<script>
export default {
  methods: {},
};
</script>

<style scoped lang="less">
@import "../../less/index.less";
.vw{
  margin-bottom:@foot-button;
}
footer {
  width: 100vw;
  height: @foot-button;
  border-top: 0.01rem solid #666;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  font-size: 0.3rem;
  z-index: 1000;
}
footer a {
  flex: 1;
  text-align: center;
  line-height: 0.4rem;
}
/* .router-link-active{
  color: #ff4400;
} */
.active {
  color: #ff4400;
}
</style>
